<template>
	<view class='wrapper'>
	  <head-title showLeftButton="true" titleText="我的相册"></head-title>
	  <view class='topCont flex_row'>
		<view class='left'>
		  <view @longpress='clearImg(index)' @tap='lookimg(index)' class='box' v-for="(item,index) in topLeft" :key="index">
			<image mode='aspectFill' :src='item'></image>
		  </view>
		  <view @tap="addImg" class='box' v-if="topLeft.length<1">
			<view class='addBox flex_row'>
			  <image mode='aspectFill' src='../../static/image/camera.png'></image>
			</view>
		  </view>
		</view>
		<view class='right flex_col'>
		  <view @longpress='clearImg(index+1)' @tap='lookimg(index+1)' class='box' v-for="(item,index) in topRight" :key="index">
			<image mode='aspectFill' :src='item'></image>
		  </view>
		  <view @tap='addImg' class='box' v-if="topLeft.length>=1&&topRight.length<=1">
			<view class='addBox flex_row'>
			  <image mode='aspectFill' src='../../static/image/camera.png'></image>
			</view>
		  </view>
		</view>
	  </view>
	  <view class='btmCont flex_row'>
		<view @longpress="clearImg(index+3)" @tap='lookimg(index+3)' class='box' v-for="(item,index) in btmList" :key="index">
		  <image mode='aspectFill' :src='item'></image>
		</view>
		<view @tap='addImg' v-if="topRight.length>1 &&btmList.length<9" class='box'>
		  <view class='addBox flex_row'>
			<image mode='aspectFill' src='../../static/image/camera.png'></image>
		  </view>
		</view>
	  </view>
	</view>
</template>

<script>
	import headTitle from '../../components/headTitle.vue';
	import common from "../../common/network.js";
	var myphoto = [], session = '';
	export default {
		components:{headTitle},
		data(){
			return{
				topLeft:[],topRight:[],btmList:[]
			}
		},
			
		  /**
		   * 生命周期函数--监听页面加载
		   */
		  onLoad: function (options) {
				myphoto = [];
				if(options.session!=undefined){
					session = options.session;
					console.log(session)
					this.getPhoto();
				}
		  },
		  methods:{
			  lookimg:function(id){
				uni.previewImage({
				  current: myphoto[id],
				  urls: myphoto,
				})
			  },
			  clearImg:function(id){
					var that = this;
					uni.showModal({
						content: '您确定要删除这张照片吗？',
						success:function(res){
							if(res.confirm){
								var $data = {
									'type':'zupinfo_del_my_photo',
									'session':session,
									'c_img': myphoto[id]
								};
								console.log(myphoto[id])
								common.network.request($data,function(res){
									myphoto.splice(id, 1);
									that.imgList();
									console.log(res)
								})
							}
						}
					})
			  },
			  addImg:function(){//添加图片
					var that = this;
					uni.chooseImage({
						count: 1,
						sizeType: 'compressed',
						success:function(res){
						var src = res.tempFilePaths;
						src = src.join('');
						wx.uploadFile({
							url: 'https://yp.6vx.com/?m=Jke',
							filePath: src,
							name: 'file',
							formData:{
							'type':'zupload_upload_img',
							'session':session
							},
							success:function(res){
							var stc = JSON.parse(res.data);
							var addsrc = stc.data;
							myphoto.push(addsrc);
							console.log(addsrc);
							that.imgList()
							var $data = {
								'type':'zupinfo_ins_my_phone',
								'session':session,
								'c_img': addsrc
							};
							common.network.request($data,function(res){
								console.log('添加成功');
							})
							}
						})
						 
						}
					})
			  },
			  imgList:function(){
					var len = myphoto.length
					if (len >= 1) {
						this.topLeft=myphoto.slice(0, 1)
						if (len >= 3) {
						this.topRight=myphoto.slice(1, 3)
						this.btmList=myphoto.slice(3, len)
						} else {
						this.topRight=myphoto.slice(1, len)
						}
					} else {
						this.topLeft=myphoto.slice(0, 1)
					}
			  },
			  getPhoto:function(){
				  var that = this;
				  var $data = {
						'type':'zupinfo_res_my_phone',
						'session':session
				  };
				  common.network.request($data,function(res){
						var list = res;
						for (var i = 0; i < list.length;++i){
							myphoto.push(list[i].c_img);
						}
						// myphoto = myphoto.reverse();
						that.imgList()
				  })
			  },
		  }
	}
</script>

<style scoped>
	.wrapper{
	  padding: 4px 3px;
	}
	.btmCont{
	  flex-wrap: wrap;
	}
	.topCont{
	  justify-content: space-between;
	  box-sizing: border-box;
	  padding-right: 2px;
	  align-items: flex-start;
	}
	.left .box:first-of-type{
	  width: 497px;
	  height: 497px;
	}
	.right{
	  box-sizing: border-box;
	}
	.box{
	  width: 249px;
	  height: 249px;
	  padding: 4px;
	  box-sizing: border-box;
	}
	.addBox{
	  background: #EBEBEB;
	  width: 100%;
	  height: 100%;
	  justify-content: center;
	}
	.box .addBox image{
	  width: 102px;
	  height: 82px;
	}
	.wrapper image{
	  width: 100%;
	  height: 100%;
	}
</style>
